<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>银行产品信息设置</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@include file="common.jsp"%>
</head>
<body style="margin-top:-10px;">
	<div style="margin-top:20px;">
		<button onclick="addBankType()" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addBankTypeBox">新增</button>
		<button onclick="updateBankTypeBox()" class="btn btn-primary btn-lg">修改</button>
		<button onclick="delBankType()" class="btn btn-primary btn-lg">删除</button>
		<button onclick="imgBox()" class="btn btn-primary btn-lg" data-toggle="modal">打开二维码图片</button>
	</div>
	<div>
		<table id="bankTypeTable" class="text-nowrap"></table>
	</div>
	<!-- 新增银行产品信息窗口 -->
	<div class="modal fade" id="addBankTypeBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加产品信息</h4>
                <h4 class="modal-title" id="myModalLabel2">修改产品信息</h4>
            </div>
            <div class="modal-body">
           		 <form id="bankTypeForm" method='post' class="form-inline" enctype="multipart/form-data">
				 	<div class="form-group">
				    	<label for="exampleInputName2">产品编码：</label>
				    	<input id="bankTypeCode" name="bankTypeCode" class="form-control"/>
				    	<input id="id" name="id" hidden="ture"/>
				  	</div>
				  	<div class="form-group" style="margin-left:20px;">
				    	<label for="exampleInputEmail2">产品名称：</label>
				    	<input id="bankTypeName" name="bankTypeName" class="form-control"/>
				  	</div>
				  	<div class="form-group" style="margin-top:20px;">
				  		<label for="exampleInputEmail2">所属银行：</label>
				  		<select id="bankCode" name="bankCode" class="form-control" style="width:179px;padding: 0 10px 0 0;"></select>
				  	</div>
				  	<div class="form-group" style="margin-left:20px;margin-top:20px;">
				  		<label for="exampleInputEmail2">所需积分：</label>
				  		<input id="integralNo" name="integralNo" type="number" class="form-control"/>
				  	</div>
				  	<!-- <div class="form-group" style="margin-top:20px;">
				  		<label for="exampleInputEmail2">回购价格：</label>
				  		<input id="counterPurchase" name="counterPurchase" type="number" class="form-control"/>
				  	</div> -->
				  	<div class="form-group" style="margin-top:20px;">
				  		<label for="exampleInputEmail2">兑换次数：</label>
				  		<input id="exchangeNo" name="exchangeNo" type="number" class="form-control"/>
				  	</div>
				  	<div class="form-group" style="margin-top:20px;">
				  		<label for="exampleInputEmail2" style="float:left;">上传二维码：</label>
				  		<input name="img" style="float:left;" type="file" />
				  	</div>
				  	<div class="form-group" style="margin-top:20px;">
				  		<label for="exampleInputEmail2" style="float:left;">上传产品截图示范：</label>
				  		<input name="uploadImg" style="float:left;" type="file" />
				  	</div>
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addBankType" onclick="submitBankType()">提交</button>
                <button type="button" class="btn btn-primary" id="updateBankType" onclick="updateBankType()">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
	</div>
	<!-- 打开兑换二维码图片窗口 -->
	<div class="modal fade" id="imgBoxDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">图片</h4>
            </div>
            <div class="modal-body">
			 	<div class="form-group">
			    	<img id="myimg" alt="" style="width:100%;" src=""/>
			  	</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
	</div>
</body>
<script type="text/javascript">
//重载表格
$(function(){
	//加载表格
	$("#bankTypeTable").bootstrapTable({
		url: "${pageContext.request.contextPath}/bankType/findBankType.do",
		method: "post",
		cache: false,
		dataType: "json",
		contentType: "application/x-www-form-urlencoded",
		toolbar: "#toolbar",
		classes: "table table-hover table-striped",
		height:450,
		pagination: true,
		sidePagination: 'server',
		search: false,
		smartDisplay:false,
		sortOrder: "desc",
		searchText: "",
		showRefresh: false,
		showToggle: false,
		singleSelect: true,
		showPaginationSwitch: false,
		pageNumber: 1,
		pageSize: 5,
		pageList: [5, 10, 20, 40],
		clickToSelect: true,
		onCheck: function (row) {
		},
		queryParamsType: "undefined",
		queryParams: function (params) {
			var params = {
				pageNum: params.pageNumber,
				pageSize: params.pageSize,
				sortBy: params.sortOrder,
			}
			return params;
		},
		columns: [
			{ checkbox: true }
			,	{
				field: "bankName",
				title: "银行名称"
			}, {
				field: "bankTypeCode",
				title: "产品编码"
			}, {
				field: "bankTypeName",
				title: "产品名称"
			}, {
				field: "integralNo",
				title: "所需积分"
			}, {
				field: "counterPurchase",
				title: "回购价格"
			}, {
				field: "exchangeNo",
				title: "兑换次数",
				formatter: formatExchangeNo
			}, {
				field: "createTime",
				title: "创建时间",
				formatter: formatTime
			}
			
		],
		responseHandler: function (data) {//onLoad前处理数据源
			return data;
		},
		onLoadSuccess: function (data) {	//成功时执行
		},
		onLoadError: function (data) {	//失败时执行
			return;
		},
		//双击行打开图片
		onDblClickRow:function(row){
			var imgUrl = "${pageContext.request.contextPath}/management/uploadImg/"+row.bankTypeImg;
			$('#myimg').attr("src",imgUrl);
			//打开图片框
			$('#imgBoxDiv').modal('show');
		}
	});
	//重载表格
	$(window).resize(function () {
		$('#bankTypeTable').bootstrapTable('resetView');
	});
	//加载银行信息下拉框
	$.ajax({
		url:"${pageContext.request.contextPath}/bank/findBank.do",
		contentType:"application/x-www-form-urlencoded",
		//data:submitData,
		type:"post",
		cache:false,//false是不缓存，true为缓存
	    async:true,//true为异步，false为同步
		success:function(data){
			var datas = jQuery.parseJSON(data);
			var bankCode = $("#bankCode");
			for (var i = 0; i < datas.rows.length; i++) {
				//获取上级类别
				bankCode.append("<option value='"+datas.rows[i].bankCode+"'>"
						+ datas.rows[i].bankName + "</option>");
			}
		}
	})
})
//打开二维码图片
function imgBox(){
	var rows = $('#bankTypeTable').bootstrapTable('getSelections');
	if(rows.length <= 0){
		return alert("请选择数据！");
	}
	var row = rows[0];
	var imgUrl = "${pageContext.request.contextPath}/management/uploadImg/"+row.imgFileName;
	$('#myimg').attr("src",imgUrl);
	//打开图片框
	$('#imgBoxDiv').modal('show');
}
//打开修改银行产品信息-点击事件
function updateBankTypeBox(){
	var rows = $('#bankTypeTable').bootstrapTable('getSelections');
	if(rows.length <= 0){
		return alert("请选择数据！");
	}
	//打开修改框
	$('#addBankTypeBox').modal('show');
	//模块框标题的文字显示与隐藏
	$('#myModalLabel').css("display","none");
	$('#myModalLabel2').css("display","block");
	//操作按钮隐藏与显示
	$('#updateBankType').show();
	$("#addBankType").hide();
	
	var row = rows[0];
	//控件赋值
	//银行产品编码
	$('#bankTypeCode').val(row.bankTypeCode);
	//银行产品名称
	$('#bankTypeName').val(row.bankTypeName);
	//所需积分
	$('#integralNo').val(row.integralNo);
	//回购价格
	$('#counterPurchase').val(row.counterPurchase);
	//兑换次数
	$('#exchangeNo').val(row.exchangeNo);
	//所属银行
	$('bankCode').val(row.bankCode);
	//ID
	$('#id').val(row.id);
	
	//控件置灰
	$('#bankTypeCode').attr("disabled","disabled");
}
//打开新增银行产品信息-点击事件
function addBankType(){
	//模块框标题的文字显示与隐藏
	$('#myModalLabel').css("display","block");
	$('#myModalLabel2').css("display","none");
	//操作按钮隐藏与显示
	$('#addBankType').show();
	$("#updateBankType").hide();
	//清空表单
	document.getElementById("bankTypeForm").reset()
	//取消置灰
	$('#bankTypeCode').removeAttr("disabled");
}
//新增银行产品信息
function submitBankType(){
	if($('#bankTypeCode').val() == ''){
		return alert("请输入产品编码！");
	}
	if($('#bankTypeName').val() == ''){
		return alert("请输入产品名称！");
	}
	if($('#integralNo').val() == ''){
		return alert("请输入所需积分！");
	}
	if($('#counterPurchase').val() == ''){
		return alert("请输入回购价格！");
	}
	if($('#exchangeNo').val() == ''){
		return alert("请输入兑换次数！");
	}
	//只传递产品编码做为查询条件
	var datas = "bankTypeCode="+$('#bankTypeCode').val();
	//银行编码数据唯一性校验
	$.ajax({
		url:"${pageContext.request.contextPath}/bankType/findBankType.do",
		contentType:"application/x-www-form-urlencoded",
		//只把银行编码传递到后台
		data: datas,
		type:"post",
		processData: false,
		cache:false,//false是不缓存，true为缓存
	    async:true,//true为异步，false为同步
		success:function(data){
			var datas = jQuery.parseJSON(data);
			if(datas.rows.length > 0){
				return alert('编码存在！');
			}else{
				//提交表单，新增银行信息
				$('#bankTypeForm').attr("action","${pageContext.request.contextPath}/bankType/addBankType.do");
				$('#bankTypeForm').submit();
				alert('新增成功！');
			}
		}
	})
}
//修改银行信息
function updateBankType(){
	if(confirm("确认修改？")){
		//from对象序列化
		//var data = $('#bankTypeForm').serialize();
		//var submitData = decodeURIComponent(data,true);
		var submitData = new FormData(document.getElementById("bankTypeForm"));
		$.ajax({
			url: "${pageContext.request.contextPath}/bankType/updateBankType.do",
			data: submitData,
			type: "post",
			processData: false,
			contentType:false,
			success:function(data){
				alert(data);
				//刷新表格数据
				$('#bankTypeTable').bootstrapTable('refresh');
				//隐藏模态框
				$('#addBankTypeBox').modal('hide');
			}
		})
	}
}
//删除银行信息
function delBankType(){
	var rows = $('#bankTypeTable').bootstrapTable('getSelections');
	if(rows.length <= 0){
		return alert("请选择数据！");
	}
	if(confirm("确认删除？")){
		//from对象序列化
		//var data = $('#bankForm').serialize();
		//var submitData = decodeURIComponent(data,true);
		var row = rows[0];
		$.ajax({
			url:"${pageContext.request.contextPath}/bankType/delBankType.do",
			data: {
				id:row.id
			},
			type:"post",
			dataType:"json",
			processData: true,
			success:function(data){
				alert(data);
				//刷新表格数据
				$('#bankTypeTable').bootstrapTable('refresh');
			}
		})
	}
}
//格式化兑换次数（-1:不限次数）
function formatExchangeNo(value, row, index){
	if(value == null){
		return '';;
	}
	if(value == -1){
		return '不限次数';
	}else{
		return value;
	}
}
</script>
</html>




